<template>
  <div>
    <div class="menu">
      <div class="menu-item" v-for="(item,index) in menus" :key="index">
        <router-link :to="{name:'moreboom',query:{type:item.id}}">
          <div class="menu-item_content">
            <img class="menu-item__icon" :src="item.icon">
            <div class="menu-item__title">{{item.title}}</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
  import { getNavigationList } from "@/api/fetch";
  export default {
    name: "HomeIconMenu",
    data() {
      return {
        menus: [
          {
            id: 1,
            icon: require("@/assets/img/recommend.png"),
            title: "爆品推荐",
            router: "moreboom"
          },
          {
            id: 2,
            icon: require("@/assets/img/great_course.png"),
            title: "大师课程",
            router: "moreprofessor"
          },
          {
            id: 3,
            icon: require("@/assets/img/start_teacher.png"),
            title: "明星讲师",
            router: "morelecturer"
          },
          {
            id: 4,
            icon: require("@/assets/img/free_area.png"),
            title: "免费专区",
            router: "morefree"
          }
        ]
      };
    },
    created() {
      this.fetchNavigation();
    },
    methods: {
      async fetchNavigation() {
        let _this = this;
        const res = await getNavigationList();
        if (res.errcode === 0) {
          const tmp = [];
          res.data.forEach((item, index) => {
            _this.menus.map(item2 => {
              if (item2.id === +item.type) {
                _this.$set(item2, "type", item.type || item.id);
                _this.$set(item2, "title", item.detail || item.title);
                _this.$set(item2, 'icon', item.icon || item.icon)
              }
            });
          });
        }
      }
    }
  };
</script>
<style lang="less" scoped>
  .menu {
    display: flex;
    justify-content: space-between;
    padding: 14px 34px;
    margin-bottom: 5px;
    background: #fff;
    &-item {
      &_content {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      &__icon {
        width: 40px;
        height: 40px;
      }
      &__title {
        font-size: 13px;
        line-height: 22px;
        color: #333;
      }
    }
  }
</style>
